<template>
	<aside class="g-aside">
		<div class="logo-box">
			<el-avatar shape="square" :size="avatarSize" alt="logo" :src="avatarUrl">综</el-avatar>
			<p v-show="!layout.isCollapse" class="logo-tips">综合管理平台</p>
		</div>

		<el-menu
			background-color="#545c64"
			text-color="#fff"
			active-text-color="skyblue"
			@select="onMenuSelect"
			unique-opened
			router
			:collapse-transition="false"
			:collapse="layout.isCollapse"
		>
			<template v-for="item in menuData">
				<el-submenu v-if="item.children && item.children.length > 0" :index="item.path" :key="item.path">
					<template slot="title">
						<i :class="[item.icon]"></i>
						<span>{{ item.title }}</span>
					</template>
					<el-menu-item-group>
						<el-menu-item v-for="sub_item in item.children" :index="sub_item.path" :key="sub_item.path">{{
							sub_item.title
						}}</el-menu-item>
					</el-menu-item-group>
				</el-submenu>
				<el-menu-item v-else :index="item.path" :key="item.path">
					<template slot="title">
						<i :class="[item.icon]"></i>
						<span>{{ item.title }}</span>
					</template>
				</el-menu-item>
			</template>
		</el-menu>
	</aside>
</template>

<script>
import menuData from './menuData';
export default {
	data() {
		this.menuData = menuData;
		return {
			avatarUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
		};
	},
	inject: ['layout'],
	computed: {
		avatarSize() {
			return this.layout.isCollapse ? 40 : 80;
		},
	},
	methods: {
		onMenuSelect() {
			this.$store.commit('CLEAR_CACHE_COMP');
		},
	},
};
</script>

<style lang="scss" scoped>
.logo-box {
	margin: 40px auto;
	text-align: center;
	.el-avatar {
		vertical-align: middle;
		font-size: 24px;
	}
}
.logo-tips {
	margin-top: 10px;
	font-size: 14px;
	color: #f8f8f8;
}
/deep/ .el-icon-arrow-down {
	color: #fff;
}
</style>
